<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
  <style>
       .el-header{
            text-align: center;
            font-size: 35px;
            font-weight: 500;
        }
        .avatar-uploader .el-upload {
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }
        .avatar-uploader .el-upload:hover {
            border-color: #409EFF;
        }
        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 100px;
            height: 100px;
            line-height: 100px;
            text-align: center;
        }
        .avatar {
            width: 100px;
            height: 100px;
            display: block;
        }
        #app{
          overflow-x:hidden;
        }
    </style>
</head>
<body>
<div id="app">
  <el-header>
    <span>完善个人信息</span>
  </el-header>
  <el-form :model="infoForm" :rules="rules" ref="infoForm" label-width="100px" >
    <el-row>
      <el-col :span="5"><div class="grid-content">
        <el-form-item label="添加头像" prop="userImage">
          <el-upload
                  class="avatar-uploader"
                  action="http://localhost:8080/addInfo/upload"
                  :show-file-list="false"
                  :on-success="handleAvatarSuccess"
                  :before-upload="beforeAvatarUpload">
            <img v-if="infoForm.userImage" :src="infoForm.userImage" class="avatar">
            <div v-else class="avatar-uploader-icon">
              <i class="el-icon-plus"></i>
            </div>
          </el-upload>
        </el-form-item>
      </div></el-col>
      <el-col :span="6"><div class="grid-content ">支持格式：png、jpg、webp</div></el-col>
    </el-row>

    <el-row :gutter="20">
      <el-col :span="8"><div class="grid-content ">
        <el-form-item label="手机号" prop="userPhone">
          <el-input v-model.number="infoForm.userPhone"></el-input>
        </el-form-item>
      </div></el-col>
      <el-col :span="8"><div class="grid-content ">
        <el-form-item label="性别" prop="userSex">
          <el-radio v-model="infoForm.userSex" label="1">男</el-radio>
          <el-radio v-model="infoForm.userSex" label="2">女</el-radio>
        </el-form-item>
      </div></el-col>
    </el-row>

    <el-row :gutter="20">
      <el-col :span="8"><div class="grid-content ">
        <el-form-item label="邮箱" prop="userEmail">
          <el-input v-model="infoForm.userEmail"></el-input>
        </el-form-item>
      </div></el-col>
      <el-col :span="8"><div class="grid-content ">
        <el-form-item label="年龄" prop="userAge">
          <el-input-number v-model="infoForm.userAge" :step="2" step-strictly></el-input-number>
        </el-form-item>
      </div></el-col>
    </el-row>

    <el-row :gutter="20">
      <el-col :span="8"><div class="grid-content ">
        <el-form-item label="生日" required>
          <el-form-item prop="birthday">
            <el-date-picker type="date" placeholder="选择日期"
                            v-model="infoForm.birthday" style="width: 100%;"
                            format="yyyy 年 MM 月 dd 日"
                            value-format="timestamp"
            ></el-date-picker>
          </el-form-item>
        </el-form-item>
      </div></el-col>
    </el-row>

    <el-row :gutter="20">
      <el-col :span="10"><div class="grid-content ">
        <el-form-item label="个性签名" prop="userDesc">
          <el-input
                  type="textarea"
                  placeholder="请输入内容"
                  v-model="infoForm.userDesc"
                  maxlength="30"
                  :rows="3"
                  show-word-limit>
          </el-input>
        </el-form-item>
      </div></el-col>
    </el-row>

    <el-form-item>
      <el-button type="warning" plain @click="submitForm('infoForm')">保存</el-button>
      <el-button @click="resetForm('infoForm')">重置</el-button>
    </el-form-item>
  </el-form>

</div>

<script src="../js/vue.js"></script>
<script src="../element-ui/lib/index.js"></script>
<script src="../js/axios-0.18.0.js"></script>
<link rel="stylesheet" href="../element-ui/lib/theme-chalk/index.css">

<script>
    new Vue({
        el:"#app",
        data() {
            return {
                dialogVisible: false,
                infoForm: {
                    userImage:'',
                    userPhone:'',
                    userEmail:'',
                    birthday: '',
                    userSex: '',
                    userAge:'',
                    userDesc: ''
                },
                rules: {
                    userImage: [
                        { required: true, message: '请选择头像', trigger: 'blur' },
                    ],
                    userPhone: [
                        { required: true, message: '请填写手机号', trigger: 'blur' }
                    ],
                    birthday: [
                        { required: true, type: 'date', message: '请选择生日', trigger: 'change' }
                    ],
                    userSex: [
                        { required: true, message: '请选择性别', trigger: 'change' }
                    ],
                    userAge: [
                        { required: true, message: '请填写年龄', trigger: 'change' }
                    ],
                    userEmail: [
                        { required: true, message: '请填写邮箱', trigger: 'blur' }
                    ]
                }
            }
        },
        methods:{
            handleAvatarSuccess(res, file) {
                this.infoForm.userImage = 'http://localhost:8080/addInfo/download?filename='+res.data;
            },
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg';
                const isWEBP = file.type === 'image/webp';
                const isLt2M = file.size / 1024 / 1024 < 2;

                if (!isJPG && !isWEBP) {
                this.$message.error('上传头像图片只能是 JPG/WEBP 格式!');
                }
                if (!isLt2M) {
                this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return (isWEBP ||isJPG) && isLt2M;
            },
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                if (valid) {
                    console.log(this.infoForm);
                    axios({
                        method:'post',
                        url:"http://localhost:8080/addInfo",
                        data:this.infoForm,
                        headers:{
                            'Content-Type':"application/json;charset=UTF-8",
                            'Authorization':localStorage.getItem('token')
                        }
                    }).then(result=>{
                            if(result.data.code==1){
                                this.$message({
                                    type: 'success',
                                    message: '保存成功!'
                                });
                            }else if(result.data.code==0){
                                this.$message.error(result.data.msg);
                            }
                         })
                         location.href="AddInfoSuccess.html";
                } else {
                    console.log('error submit!!');
                    return false;
                }
                });
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            }
        }
    })
</script>
</body>
</html>